<template>
  <el-card>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-divider content-position="left">申请人基本情况</el-divider>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="姓别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所在地" prop="site">
        <el-cascader
          style="width:400px"
          clearable
          v-model="site"
          :props="props"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-input v-model="form.nation" placeholder="请输入民族"></el-input>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="marital">
        <el-radio-group v-model="form.marital">
          <el-radio label="已婚"></el-radio>
          <el-radio label="未婚"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生年月" prop="birth">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.birth"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          style="width: 400px;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="籍贯" prop="nativePlace">
        <el-input
          v-model="form.nativePlace"
          placeholder="请输入籍贯"
        ></el-input>
      </el-form-item>
      <el-form-item label="文化程度" prop="culture">
        <el-select
          v-model="form.culture"
          placeholder="请选择文化程度"
          style="margin-right:10px"
        >
          <el-option label="小学" value="小学"></el-option>
          <el-option label="初中" value="初中"></el-option>
          <el-option label="中专" value="中专"></el-option>
          <el-option label="大专" value="大专"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="博士" value="博士"></el-option>
          <el-option label="博士后" value="博士后"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="form.idCard" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="户籍地址" prop="permanent">
        <el-input
          v-model="form.permanent[0]"
          class="mr10"
          style="width:220px"
        ></el-input>
        <span class="mr10">
          乡（镇、街道）
        </span>
        <el-input
          v-model="form.permanent[1]"
          class="mr10"
          style="width:220px"
        ></el-input>
        <span class="mr10">
          村（社区）
        </span>
        <el-input
          v-model="form.permanent[2]"
          class="mr10"
          style="width:220px"
        ></el-input>
      </el-form-item>
      <el-form-item label="现住址">
        <el-input
          v-model="form.present[0]"
          class="mr10"
          style="width:220px"
        ></el-input>
        <span class="mr10">
          乡（镇、街道）
        </span>
        <el-input
          v-model="form.present[1]"
          class="mr10"
          style="width:220px"
        ></el-input>
        <span class="mr10">
          村（社区）
        </span>
        <el-input
          v-model="form.present[2]"
          class="mr10"
          style="width:220px"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮编">
        <el-input v-model="form.postcode" placeholder="请输入邮编"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-divider content-position="left">监护人或联系人</el-divider>
      <el-form-item label="姓名" prop="tutelageName">
        <el-input
          v-model="form.tutelageName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="与申请人关系" prop="relation">
        <el-input
          v-model="form.relation"
          placeholder="请输入与申请人关系"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="tutelagePhone">
        <el-input
          v-model="form.tutelagePhone"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
      <el-divider content-position="left">残疾证信息</el-divider>
      <el-form-item label="初次办证日期" prop="disabledCardDate">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.disabledCardDate"
          format="yyyy年MM月dd日"
          value-format="yyyy-MM-dd"
          style="width: 400px;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="残疾证号" prop="disabledCard">
        <el-input
          v-model="form.disabledCard"
          placeholder="请输入残疾证号"
        ></el-input>
      </el-form-item>
      <el-form-item label="残疾类别" prop="disabledType">
        <el-select
          v-model="form.disabledType"
          placeholder="请选择残疾类别"
          style="margin-right:10px"
        >
          <el-option
            v-for="item in getDictionary('DIS_TYPE')"
            :key="item.keyword"
            :label="item.label"
            :value="item.keyword"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="残疾等级" prop="disabledLevel">
        <el-select
          v-model="form.disabledLevel"
          placeholder="请选择残疾等级"
          style="margin-right:10px"
        >
          <el-option
            v-for="item in getDictionary('DIS_LEVEL')"
            :key="item.keyword"
            :label="item.label"
            :value="item.keyword"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$parent.show = 'table'">
          返回
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "manageDetail",
  props: {
    disDetail: {
      type: Object
    }
  },
  created() {
    if (Object.keys(this.disDetail).length !== 0) {
      let {
        permanent,
        present,
        province,
        city,
        district,
        street,
        committee
      } = this.disDetail;
      this.disDetail.permanent = permanent.split(",");
      this.disDetail.present = present.split(",");
      this.site = [province, city, district, street, committee].map(i => +i);
      this.site.map((i, k) => {
        if (isNaN(i)) {
          this.site.splice(k, 2);
        }
      });
      this.form = this.disDetail;
    }
  },
  data() {
    let validatePhone = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("手机号格式不正确"));
      }
    };
    let validateIdCard = (rule, value, callback) => {
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("身份证号格式不正确"));
      }
    };
    let validateSite = (rule, value, callback) => {
      if (this.site.length == 0) {
        callback(new Error("请选择所在地"));
      } else {
        callback();
      }
    };
    return {
      // 所在地的值
      site: [],
      props: {
        label: "name",
        value: "id",
        leaf: "isLeaf",
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      form: {
        name: "",
        sex: "",
        nation: "",
        marital: "",
        birth: "",
        nativePlace: "",
        culture: "",
        idCard: "",
        permanent: [],
        present: [],
        postcode: "",
        phone: "",
        tutelageName: "",
        relation: "",
        tutelagePhone: "",
        disabledCard: "",
        disabledCardDate: "",
        disabledType: "",
        disabledLevel: ""
      },
      rules: {
        site: [{ validator: validateSite, trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择姓别", trigger: "change" }],
        nation: [{ required: true, message: "请输入民族", trigger: "blur" }],
        marital: [
          { required: true, message: "请选择婚姻状况", trigger: "change" }
        ],
        birth: [
          {
            required: true,
            message: "请选择出生年月",
            trigger: "change"
          }
        ],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" }
        ],
        culture: [
          { required: true, message: "请输入文化程度", trigger: "change" }
        ],
        idCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur"
          },
          { validator: validateIdCard, trigger: "blur" }
        ],
        permanent: [
          {
            type: "array",
            required: true,
            message: "请输入户籍地址",
            trigger: "blur"
          }
        ],
        tutelageName: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        relation: [
          { required: true, message: "请输入与申请人关系", trigger: "blur" }
        ],
        tutelagePhone: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur"
          },
          { validator: validatePhone, trigger: "blur" }
        ],
        disabledCard: [
          {
            required: true,
            message: "请输入残疾证号",
            trigger: "blur"
          }
        ],
        disabledCardDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        disabledType: [
          { required: true, message: "请选择残疾类别", trigger: "change" }
        ],
        disabledLevel: [
          { required: true, message: "请选择残疾等级", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    // 懒加载区域
    lazyLoad(node, resolve) {
      let query = { level: 1, pid: 0 };
      if (node.level !== 0) {
        let { id, level } = node.data;
        query = {
          level: level + 1,
          pid: id
        };
      }
      this.API.getSysAreaByLevelAndPid(query).then(ret => {
        // 设置叶子节点
        ret.data.map(i => {
          if (i.level == 5 || i.name == "市辖区") {
            i.isLeaf = true;
          }
        });
        resolve(ret.data);
      });
    },
    // 提交
    onSubmit() {
      // 设置所在区域
      this.form.province = this.site[0];
      this.form.city = this.site[1];
      this.form.district = this.site[2];
      this.form.street = this.site[3];
      this.form.committee = this.site[4];
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm("确认提交?").then(() => {
            let { permanent, present } = this.form;
            this.form.permanent = this.removeDot(permanent).join(",");
            this.form.present = this.removeDot(present).join(",");
            this.API.addOrUpdateDisabledPerson({ body: this.form })
              .then(ret => {
                this.success("提交成功!");
                this.$refs["form"].resetFields();
                this.$parent.getPageData();
                this.$parent.show = "table";
              })
              .catch(err => {
                this.warning(err);
              });
          });
        } else {
          return false;
        }
      });
    },
    // 移除字符串中的逗号
    removeDot(data = []) {
      if (data.length > 0) {
        data = data.map(i => i.replace(/,/g, ""));
      }
      return data;
    }
  }
};
</script>

<style scoped>
.el-divider__text {
  color: #409eff;
}

.el-input {
  width: 400px;
}

.mr10 {
  margin-right: 10px;
}
</style>
